import  React, { Component } from 'react';
import { connect } from 'react-redux';
import { TopicWrapper,TopicItem } from '../style';

class Topic extends Component{

    render(){
        const {topicList} =this.props;
        const newList=topicList.toJS();
        if(newList.length){
            return(
                <TopicWrapper>
                        {
                            newList.map((item)=>{
                                return(
                                    <TopicItem key={item.id}>
                                        <img src={item.imgUrl}  alt="话题"/>
                                        {item.title}
                                    </TopicItem>
                                )
                            })
                        }
                </TopicWrapper>
            )
        }else{
            return(
                <TopicWrapper></TopicWrapper>
            )
        }
    }
}

const mapStateToProps=(state)=>{
    return{
        //immutabled对象的get方法
        topicList:state.getIn(['home','topicList']),
    }
};

export default connect(mapStateToProps,null)(Topic)